<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="FloorClose"></div>
      <div class="pub-w">
        <!--<div class="rele-titles" @click="FloorClose">新增小组<span>X</span></div>-->
        <div class="rele-titles"><span>新增小组</span><img @click="FloorClose" src="../assets/img/tub.png" alt=""></div>
        <div class="pub-list">
          <div class="pub-li">
            <div class="pub-title">组别名称</div>
            <div class="pub-input"><input type="tetx" name="" v-model="title" placeholder="请输入组别名称" style="border: 1px solid #a0a0a0;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">归属区域</div>
            <div class="pub-input">
              <select @change="getMenD" v-model="regionvalue" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px">
                <option
                  v-for="item in allQu"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">归属门店</div>
            <div class="pub-input">
              <select v-model="storevalue" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px">
                <option
                  v-for="item in store"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">排序值</div>
            <div class="pub-input"><input type="number" name="" v-model="sort" placeholder="请输入排序号" style="border: 1px solid #a0a0a0;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">区域类型</div>
            <div class="pub-input">
              <el-radio v-model="radio" label="1">自营店</el-radio>
              <el-radio v-model="radio" label="2">加盟店</el-radio>
              <el-radio v-model="radio" label="3">其他</el-radio>
            </div>
          </div>
          <div class="pub-li">
            <el-button @click="groupsubmit" style="right: 180px;position: absolute;" type="primary">添加</el-button>
            <el-button @click="FloorClose" style="right: 5%;" type="primary">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
export default {
  props: {
    LDmodal: {
      type: Function
    },
    Refresh: {
      type: Function
    },
    FloorClose: {
      type: Function
    },
    Quyu: {
      type: Array
    }
  },
  data() {
    return {
      title: "",
      radio: "1",
      regionvalue: "",
      storevalue: "",
      store: [],
      sort: ""
    };
  },
  methods: {
    getMenD() {
      let that = this;
      (that.storevalue = " "),
        that.$http
          .get("/index/department", {
            params: {
              id: that.regionvalue
            }
          })
          .then(res => {
            that.store = res.data;
          })
          .catch(err => {
            console.log(err);
          });
    },
    groupsubmit() {
      let that = this;
      that.$http
        .post("/index/department", {
          pid: that.storevalue,
          title: that.title,
          sort: that.sort,
          area_type: that.radio
        })
        .then(res => {
          if (res.data.status === 1) {
            that.Refresh();
            that.FloorClose();
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          } else {
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

  computed: {
    allQu() {
      return this.Quyu;
    }
  }
};
</script>

<style scoped>
.modal {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-li button {
  width: 80px;
  font-size: 1.1em;
  /*background: #ed7d31;*/
  color: #ffffff;
  border: none;
  float: left;
  border-radius: 5px;
}

.pub-li button:nth-child(2) {
  float: right;
  width: 80px;
  position: relative;
  color: #fff;
}
.pub-list {
  box-sizing: border-box;
  width: 100%;
  /* float: left; */
  height: calc(260px - 51px);
  margin-top: 60px;
  text-align: center;
  overflow-y: scroll;
  padding-bottom: 20px;
}
.pub-input {
  width: 65%;
  float: left;
}

.pub-input input {
  width: 100%;
  line-height: 27px;
  height: 27px;
  float: left;
  cursor: pointer;
}
select {
  cursor: pointer;
}
.pub-li {
  margin-top: 15px;
  width: 80%;
  display: inline-block;
}

.pub-title {
  width: 30%;
  line-height: 27px;
  text-align: center;
  font-size: 1.1em;
  float: left;
  font-weight: bold;
}
.pub-w {
  width: 28%;
  /* left: 40%; */
  height: 260px;
  /* top: 50%; */
  overflow: hidden;
  /* margin-top: -150px; */
  background: #ffffff;
  border-radius: 5px;
  position: relative;
  z-index: 10;
}
img:hover {
  background: #bd2c00 !important;
  color: #ffffff;
}

img {
  /*position: fixed;*/
  /* flex-star:40px; */
  /*margin-left: 44%;*/
  /* position: relative; */
  cursor: pointer;
  border-radius: 10px;
}
img {
  left: 144%;
}
.rele-titles {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
  line-height: 50px;
  font-size: 2em;
  color: #000;
  background: #f5f5f7;
  position: absolute;
  z-index: 9;
  border-bottom: 1px solid #d3d3d3;
}
</style>
